<template>
  <div class="app-container">
    <!-- search -->
    <el-row :gutter="10">
      <!-- right -->
      <el-col :span="24">
        <!-- searchButton -->
        <el-button type="primary" size="small" icon="el-icon-search"
          >搜索</el-button
        >
        <!-- 显示图片区域 -->
        <div class="showArea"></div>
        <!-- 素材操作 -->
        <el-form
          :model="form"
          inline
          label-width="75px"
          size="small"
          ref="form"
          class="mb10"
        >
          <fieldset>
            <legend>素材操作</legend>
            <!-- 素材ID -->
            <el-form-item label="素材ID">
              <el-input
                placeholder="请输入素材ID"
                v-model="form.materiaID"
              ></el-input>
            </el-form-item>
            <!-- 素材名称 -->
            <el-form-item label="素材名称">
              <el-input
                placeholder="请输入素材名称"
                v-model="form.materiaName"
              ></el-input>
            </el-form-item>
            <!-- 素材类型 -->
            <el-form-item label="素材类型">
              <el-select
                placeholder="请选择素材类型"
                v-model="form.materialType"
              >
                <el-option label="图片" value="images"></el-option>
                <el-option label="视频" value="video"></el-option>
              </el-select>
            </el-form-item>
          </fieldset>
        </el-form>

        <!-- 照片墙 -->
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <span>点击添加图片</span>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { treeselect } from '@/api/system/dept' // 导入Tree树形Api
import Treeselect from '@riophae/vue-treeselect' // 导入Tree树形组件
export default {
  components: { Treeselect },
  data () {
    return {
      input: '', // 卡组名称
      deptOptions: undefined, // 公交站台树选项
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {
        materiaID: '', // 素材ID
        materiaName: '', // 素材名称
        materialType: '' // 素材类型
      },
      dialogImageUrl: '', // 浏览图片地址
      dialogVisible: false // 浏览图片
    }
  },
  methods: {
    // 筛选节点
    filterNode (value, data) {
      console.log(!value)
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击获得相应的数据
    handleNodeClick (data) {
      window.console.log(data)
    },
    // 查询部门下拉树结构
    getTreeselect () {
      treeselect().then(response => {
        // window.console.log(response);
        this.deptOptions = response.data
      })
    },
    // 删除图片
    handleRemove (file, fileList) {
      window.console.log(file, fileList)
    },
    // 预览已上传的图片
    handlePictureCardPreview (file) {
      window.console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  },
  created () {
    this.getTreeselect()
  },
  watch: {
    // 根据名称筛选部门树
    deptName (val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  .showArea {
    margin: 10px 0 10px 0;
  }
}
</style>
